import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { ThemeConfigProps } from '../interface'

export const ConfigStore = defineStore(
  'ConfigState',
  () => {
    const show = ref(false)
    const language = ref('zh-cn')
    const themeConfig = ref<ThemeConfigProps>({
      // 布局切换 ==>  纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns
      layout: 'classic',
      // element组件大小
      size: 'default',
      // 默认 primary 主题颜色
      primary: '#409EFF',
      // 深色模式
      isDark: false,
      // 灰色模式
      isGrey: false,
      // 色弱模式
      isWeak: false,
      // 折叠菜单
      isCollapse: false,
      // 面包屑导航
      breadcrumb: true,
      // 面包屑导航图标
      breadcrumbIcon: true,
      // 标签页
      tabs: true,
      // 标签页图标
      tabsIcon: true,
      // 页脚
      footer: false,
      // 当前页面是否全屏
      maximize: false,
    })
    const theme = ref({})

    const setShow = (val: boolean) => {
      show.value = val
    }
    const setThemeConfig = (val: ThemeConfigProps) => {
      themeConfig.value = val
    }
    const setLanguage = (val: string) => {
      language.value = val
    }

    return { show, theme, themeConfig, language, setShow, setThemeConfig, setLanguage }
  },
  {
    persist: {
      storage: localStorage,
      pick: ['language', 'themeConfig', 'theme'],
    },
  },
)
